import React from 'react'
import api from '../../axiox'

import {Spin, Alert,Pagination } from 'antd';
import MovieItem from './MovieItem.jsx';


export default class extends React.Component {
    constructor(props) {
        super(props)
        //初始化state
        this.state = {
            start: this.props.match.params.start,
            movies: [],
            count: 14,
            total: 0,
            type: this.props.match.params.type,
            loading: true
        };
    }

    componentWillReceiveProps(nextProps, nextContext) {
        this.setState({
            start: nextProps.match.params.start,
            type: nextProps.match.params.type,
            loading: true,
        }, ()=>this.getMovieList())

    }

    getMovieList = () => {
        let url = `v2/movie/${this.state.type}`
        api({
            method: 'get',
            url,
            params: {
                start: this.state.start,
                count: this.state.count,
                apikey: "0df993c66c0c636e29ecbb5344252a4a"
            },

        }).then(res => {
            this.setState({
                total: res.data.total,
                movies: res.data.subjects,
                loading: false
            })
        })
    }

    currentChange=(start)=>{
        this.props.history.push(`/movie/${this.state.type}/${start}`)
    }

    componentDidMount() {
        this.getMovieList();
    }

    //默认属性
    static defaultProps = {}

    render() {
        return <div style={{padding: 5}}>
            <Spin spinning={this.state.loading}>
                {this.state.loading ?
                    <Alert
                        message="加载中"
                        type="info"
                    />
                    :
                    <div>
                        <div style={{display: "flex", flexWrap: "wrap"}}>
                            {this.state.movies.map(item => {
                                return <MovieItem history={this.props.history} {...item} key={item.id} />
                            })}
                        </div>
                        <Pagination defaultPageSize={this.state.count} defaultCurrent={parseInt(this.state.start)} onChange={this.currentChange} total={this.state.total} />
                    </div>
                }
            </Spin>
        </div>

    }
}



